$postSignature: (
    primary: var(--postSignature-border-color),
    background: var(--postSignature-bg),
    borderRadius: 2px,
);

$toolMenu: (
    background: var(--md-summary-bg),
    color: #fff,
);

$signature: (
    padding: 1rem 14px,
    fontSize: 1em,
);

$imagebox: (
    background: var(--dragmenuItem-bg),
);

$player: (
    bodyBackground: var(--tags-bg),
);

$postMessage: (
    tagsColor: var(--body-color),
);

$emoji: (
    textEmojiColor: var(--body-color),
    bg: var(--emoji-bg),
    borderColor: var(--form-border-color),
    hoverBg: var(--tags-bg),
    hoverBorderColor: var(--postSignature-border-color),
);

@import 'plugins/highlight/index.scss';
@import 'plugins/linenumbers/index.scss';
@import 'plugins/postMessage/index.scss';
@import 'plugins/commentsAvatars/index.scss';
@import 'plugins/signature/index.scss';
@import 'plugins/emoji/index.scss';
@import 'plugins/imagebox/index.scss';
@import 'plugins/notice/index.scss';
@import 'plugins/postSignature/index.scss';
@import 'plugins/toolMenu/index.scss';
@import 'plugins/mode/index.scss';
@import 'plugins/clickEffect/index.scss';
@import 'plugins/player/index.scss';
// @import 'plugins/copyCode/index.scss';
// @import 'plugins/codeLanguage/index.scss';

// toolMenu

.custom-toolbar {
    z-index: 9;
}

// comments avatars

.custom-comment-avatar {
    position: relative;
    img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }
}

.custom-comments-author {
    .custom-comment-avatar::after {
        position: absolute;
        bottom: 11px;
        right: 5px;
        content: '\f058';
        color: #4ac7ff;
        background-color: #fff;
        line-height: 1em;
        border-radius: 50%;
        margin-right: 0;
        font-size: 80%;
    }
}

// postMessage

.custom-categories a,
.custom-tags a {
    box-shadow: none;
}

// image box

.medium-zoom-image--opened {
    z-index: 41;
}

// dragmenu

.custom-drag-menu {
    z-index: 3;
}

.medium-zoom-overlay {
    z-index: 2;
}

// click

#click-effects {
    z-index: 6;
}

// player

body .aplayer.aplayer-fixed .aplayer-lrc {
    bottom: 30px;
}

// catalog

#catalog {
    padding: 25px;
    font-size: 14px;
    overflow-x: hidden;
    word-wrap: nowrap;
    text-overflow: ellipsis;

    .catalog-title {
        display: flex;
        align-items: center;
        position: sticky;
        top: 0;
        font-family: DM Sans, sans-serif;
        color: #5c5e6e;
        font-size: 15px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    ul {
        border-left: 1px solid var(--color-catalog-border);
        li {
            color: var(--catalog-color);
            display: flex;
            align-items: center;
            line-height: 1.8;
            &::before {
                position: relative;
                right: 5px;
                display: block;
                width: 7px;
                height: 7px;
                content: '';
                border-radius: 50%;
                border: 1px solid var(--themeColor);
                background-color: var(--sidebar-bg);
                margin-right: 4px;
                transition: transform 0.2s;
            }
            &:hover {
                color: var(--catalogList-hover);
            }
            a {
                display: inline-block;
                width: 100%;
                .icon {
                    width: 1.2em;
                    height: 1.8em;
                }
            }
        }

        .h1-list {
            font-weight: 700;
            font-size: 16px;
        }
        .h2-list {
            font-size: 14px;
        }
        .h3-list,
        .h4-list,
        .h5-list,
        .h6-list {
            font-size: 12px;
        }
        .h1-list ~ .h2-list {
            margin-left: 1em;
            font-size: 14px;
        }
        .h2-list ~ .h3-list {
            margin-left: 2em;
        }
        .h3-list ~ .h4-list {
            margin-left: 3em;
        }
        .h4-list ~ .h5-list {
            margin-left: 4em;
        }
        .h5-list ~ .h6-list {
            margin-left: 5em;
        }

        .catalog-active {
            color: var(--themeColor);
            transition: all 0.3s;
            &::before {
                transform: scale(1) translateX(0);
                background-color: var(--themeColor);
            }
        }
    }
}

// copy code
.cnblogs_code,
.cnblogs_Highlighter {
    position: relative;
    .copy-btns {
        z-index: 1;
    }
}

.copy-btns {
    position: absolute;
    right: 8px;
    top: 8px;
    width: 86px;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px 1px 8px;
    border-radius: 4px;
    color: var(--color-copy-btn);
    &:before {
        content: '\f0c5';
        margin-right: 8px;
        font-weight: 500;
    }
    &:hover {
        background: var(--md-hr-color);
        transition: background 0.2s;
    }
}

// code language
.awes-lang {
    position: absolute;
    right: 98px;
    top: 13px;
    height: 14px;
    line-height: 1.2;
    padding-right: 14px;
    margin-right: 4px;
    border-right: 1px solid var(--md-hr-color);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--color-copy-btn);
}
